<template>
  <div>
    <el-form ref="form" :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="双方用户ID/站内信标题">
        <el-input v-model="formInline.keywords" placeholder="请输入……" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch('form')">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="from_uid" label="发信人ID" width="100"></el-table-column>
      <el-table-column prop="orther_info.from_user_name" label="发信人" width="100"></el-table-column>
      <el-table-column prop="to_uid" label="收信人ID" width="100"></el-table-column>
      <el-table-column prop="orther_info.to_user_name" label="收信人" width="100"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="create_time" label="时间" :formatter="timeFormat" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="info(scope.$index, scope.row)">查看</el-button>
          <el-button size="small" @click="del(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import notify from '@/tools/notify'

  export default {
    data () {
      return {
        formInline: {
          keywords: ''
        }
      }
    },
    computed: {
      ...mapState({
        tableData: state => state.inmail.mailList,
        pageData: state => state.inmail.pageData
      })
    },
    async created () {
      await this.mailList()
    },
    methods: {
      // 获取站内信列表
      async mailList () {
        let payload = {
          page: this.pageData.current_page,
          listRows: this.pageData.per_page,
          keywords: this.$route.query.keywords
        }
        await this.$store.dispatch('inmail/mailList', payload)
      },
      // 处理检索条件
      onSearch (formName) {
        const self = this
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$router.push({path: '/inmail/list', query: {keywords: self.formInline.keywords}})
            self.mailList()
          }
        })
      },
      // 点击翻页时操作
      handleCurrentChange (val) {
        this.pageData.current_page = val
        this.mailList()
      },
      // 站内信编辑
      info (index, row) {
        this.$router.push({name: 'MailInfo', params: {id: row.id}})
      },
      // 站内信删除
      del (index, row) {
        let payload = {
          id: row.id
        }
        this.$store.dispatch('inmail/mailDel', payload).then(res => {
          this.mailList()
          notify.success(res.msg)
        })
      },
      timeFormat: function (value) {
        let mydate = new Date()
        mydate.setTime(value.create_time * 1000)
        return mydate.toLocaleString()
      }
    }
  }
</script>
